<template>
    <el-col>
        <el-col style="margin: 15px 0px;">
            <el-input placeholder="请输入告标题" v-model="input" style="width: 217px; margin-right: 20px;">
            </el-input>
            <el-date-picker v-model="date1" type="date" placeholder="请输入公告开始日期" style="width: 217px; margin-right: 20px;">
            </el-date-picker>
            <el-date-picker v-model="date2" type="date" placeholder="请输入公告结束日期" style="width: 217px; margin-right: 20px;">
            </el-date-picker>
            <el-button type="primary" @click="handleIconClick" style="margin-right: 20px;">查询 </el-button>
            <el-button type="primary" @click="handleAdd">增加公告 </el-button>
        </el-col>
        <el-col>
            <el-col class="block">

                <!--添加 Ajax  刘傲杰-->
                <el-table :data="tableData" highlight-current-row border style="width: 100%"  @selection-change="selsChange">

                     <!--自适应修改  修改人：刘傲杰-->
                    <!--<el-table-column label="公告编号" prop="noticeId"> &lt;!&ndash;width="180"&ndash;&gt;
                    </el-table-column>-->
    
                    <el-table-column label="公告标题" prop="noticeName" align="left">
                    </el-table-column>
    
                    <el-table-column label="公告时间" prop="noticeDateStr" align="left">
                    </el-table-column>
    
                    <el-table-column label="针对人群" prop="noticeTargetStr" align="left">
                    </el-table-column>
                   <!-- /*
                    * 创建时间不必要
                    * 修改人：刘傲杰
                    * */-->
                   <!-- <el-table-column label="创建时间" prop="notCreateDateStr" width="180">
                    </el-table-column>-->
    
                    <el-table-column label="修改时间" prop="notModifyDateStr" align="left">
                    </el-table-column>
    
                    <el-table-column label="修改人" prop="noticeModifyName" align="left">
                    </el-table-column>

                    <!--删除状态不需要  刘傲杰-->
                    <!--<el-table-column label="删除状态" prop="noticeDel"> width="180">
                    </el-table-column>-->
    
                    <el-table-column label="操作" fixed="right" width="220" align="left">
                        <template scope="scope">
                           <!-- /*
                            * 增加 修改和删除 功能  由于查看定义为handEdit  编辑暂时定义为handLook 新增编辑页面
                            * 为 查看  增加样式 前后保持一致
                            * 修改人：刘傲杰
                            * */-->
                            <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                            <el-button size="small" type="success" @click="handleLook(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click.native.prevent="handleDel(scope.$index, scope.row)">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
    
                <span class="demonstration"></span>
                <el-pagination style="float:right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-col>
        </el-col>
    
        <!--新增界面-->
        <el-dialog title="增加公告信息" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
                <el-form-item label="公告标题:" prop="noticeName">
                    <el-input v-model="addForm.noticeName" style="width:80%" auto-complete="off"></el-input>
                </el-form-item>
                <!--公告详情应为文本域  刘傲杰-->
                <el-form-item label="公告详情:" prop="noticeInfo">
                    <el-input type="textarea" style="width:80%" v-model="addForm.noticeInfo" auto-complete="off"></el-input>
                </el-form-item>
                <!--公告时间选择日历插件
                修改人：刘傲杰-->
                <!--<el-form-item label="公告时间:" prop="noticeDate">
                    <el-input placeholder="请输入时间格式：yyyy-mm-dd" v-model="addForm.noticeDate" auto-complete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="公告时间:" prop="noticeDate">
                <el-date-picker v-model="addForm.noticeDate" type="date" placeholder="请选择公告公布日期"
                                :picker-options="pickerOptions" style="width: 217px; margin-right: 20px;">
                </el-date-picker>
                </el-form-item>
               <!-- /*
                * 针对人群可以用下拉列表
                * 修改人：刘傲杰&ndash;&gt;
                * */-->
                <!--<el-form-item label="针对人群:" prop="noticeTarget">
                    <el-input v-model="addForm.noticeTarget" auto-complete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="针对人群:" prop="noticeTargetStr">
                    <el-select v-model="addForm.noticeTargetStr" auto-complete="off" placeholder="请选择">
                         <el-option label="教师" value="1" ></el-option>
                         <el-option label="学生" value="0" ></el-option>
                    </el-select>
                </el-form-item>

                <!--<el-form-item label="创建时间:" prop="noticeCreateDate">
                    <el-input placeholder="new Date().getDate()" v-model="addForm.noticeCreateDate" auto-complete="off"></el-input>
                </el-form-item>-->
            </el-form>
            <el-col slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">保存</el-button>
            </el-col>
        </el-dialog>
        <!--新增的“编辑”页面  修改人：刘傲杰-->
        <!--编辑界面-->
       <el-dialog title="公告修改" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
                <!--<el-form-item label="公告编号：" prop="noticeId">
                    &lt;!&ndash;<el-input v-model="editForm.noticeId" auto-complete="off" disabled="true" type="hidden"></el-input>&ndash;&gt;
                    <el-input v-model="editForm.noticeId" auto-complete="off" disabled="true"></el-input>
                </el-form-item>-->
                <el-form-item label="公告标题：" prop="noticeName">
                    <el-input  v-model="editForm.noticeName" style="width:80%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="公告内容：" prop="noticeInfo">
                    <el-input type="textarea" style="width:80%" v-model="editForm.noticeInfo" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="针对人群：" prop="noticeTargetStr">
                    <el-select v-model="editForm.noticeTargetStr" placeholder="请选择">
                         <!--前台写死取值-->
                        <el-option label="教师" value="1" ></el-option>
                        <el-option label="学生" value="0" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公告时间：" prop="noticeDateStr">
                    <el-date-picker v-model="editForm.noticeDateStr" align="right" type="date" placeholder="请输入公告时间"
                                    :picker-options="pickerOptions" style="width: 217px; margin-right: 20px;">
                    </el-date-picker>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit">提交</el-button>
            </div>
        </el-dialog>
    
        <!--查看界面-->
        <el-dialog title="公告信息查看" v-model="updateFormVisible" :close-on-click-modal="false">
            <el-form :model="aaaaa" label-width="100px" ref="aaaaa">
                <div style="overflow: auto; width: 100%;">
                    <table class="border-table">
                        <tr>
                            <td class="alt">公告编号:</td>
                            <td>{{aaaaa.noticeId}}</td>
                        </tr>
                        <tr>
                            <td class="alt">公告标题:</td>
                            <td>{{aaaaa.noticeName}}</td>
                        </tr>
                        <tr>
                            <td class="alt">公告详情:</td>
                            <td>{{aaaaa.noticeInfo}}</td>
                        </tr>
                        <tr>
                            <td class="alt">公告时间:</td>
                            <td>{{aaaaa.noticeDateStr}}</td>
                        </tr>
                        <tr>
                            <td class="alt">针对人群:</td>
                            <td>{{aaaaa.noticeTargetStr}}</td>
                        </tr>
                        <tr>
                            <td class="alt">创建时间:</td>
                            <td>{{aaaaa.notCreateDateStr}}</td>
                        </tr>
                        <tr>
                            <td class="alt">修改时间:</td>
                            <td>{{aaaaa.notModifyDateStr}}</td>
                        </tr>
                        <tr>
                            <td class="alt">修改人:</td>
                            <td>{{aaaaa.noticeModifyName}}</td>
                        </tr>
                    </table>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="scoreDetailVisible = false">取消</el-button>
            </div>

               <!-- <el-form-item label="公告编号:" prop="noticeId">
                    <el-input v-model="aaaaa.noticeId" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="公告标题:" prop="noticeName">
                    <el-input v-model="aaaaa.noticeName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="公告详情:" prop="noticeInfo">
                    <el-input v-model="aaaaa.noticeInfo" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="公告时间:" prop="noticeDateStr">
                    <el-input v-model="aaaaa.noticeDateStr" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="针对人群:" prop="noticeTargetStr">
                    <el-input v-model="aaaaa.noticeTargetStr" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="创建时间:" prop="notCreateDateStr">
                    <el-input v-model="aaaaa.notCreateDateStr" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="修改时间:" prop="notModifyDateStr">
                    <el-input v-model="aaaaa.notModifyDateStr" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="修改人:" prop="noticeModifyName">
                    <el-input v-model="aaaaa.noticeModifyName" auto-complete="off"></el-input>
                </el-form-item>
                &lt;!&ndash;<el-form-item label="删除状态:" prop="noticeDel">
                    <el-input v-model="aaaaa.noticeDel" auto-complete="off"></el-input>
                </el-form-item>&ndash;&gt;
            </el-form>
            <el-col slot="footer" class="dialog-footer">
                <el-button @click.native="updateFormVisible = false">返回</el-button>
            </el-col>-->
        </el-dialog>
    </el-col>
</template>

<script>
import util from '../../../common/js/util'
import { getdata2, querynotice, addnotice, getlikedata ,editnotice ,deletenotice} from '../../../api/api'

export default {
    data() {
        return {
            pickerOptions:{
                disabledDate(time){
                    return time.getTime() < Date.now() - 8e7;
                },
                shortcuts:[{
                    text: '今天',
                    onClick(picker){
                        picker.$emit('pick',new Date());
                    }
                },{
                    text: '明天',
                    onClick(picker){
                        const date =new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24);
                        picker.$emit('pick',date);
                    }
                }, {
                    text: '一周后',
                    onClick(picker){
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            noticeId: '',
            total: 0,
            currentPage: 1,
            pageSize: 15,
            input: '',
            date1: '',
            date2: '',
            tableData: [],
            addFormVisible: false,//新增界面是否显示
            updateFormVisible: false,//查看界面是否显示
            addLoading: false,
            addFormRules:{
                noticeName:[{required:true,message:'请输入公告标题',trigger:'blur'}],
                noticeInfo:[{required:true,message:'请输入公告内容',trigger:'blur'}],
                noticeDateStr:[{required:true,message:'请输入公告时间',trigger:'blur'}],
                noticeTargetStr:[{required:true,message:'请输入针对人群',trigger:'blur'}],
            },
            aaaaa: [],
            //新增界面数据
            addForm: {
                noticeId:'',
                target: '',
                noticeName: '',
                noticeInfo: '',
                noticeTargetStr: '',
                noticeDate:''
            },
            selectForm: {
                target: '',
                noticeId: '',
                noticeName: '',
                noticeInfo: '',
                noticeDateStr: '',
                noticeTargetStr: '',
                noticeCreateDateStr: '',
                noticeModifyDateStr: '',
                noticeModifyName: '',
                noticeDel: '',
            },
            //新增的“编辑”页面
            editLoading: false,
            editFormVisible: false,//编辑界面是否显示
            editFormRules:{
                noticeName:[{required:true,message:'请输入公告标题',trigger:'blur'}],
                noticeInfo:[{required:true,message:'请输入公告内容',trigger:'blur'}],
                noticeDateStr:[{required:true,message:'请输入公告时间',trigger:'blur'}],
            },
            //编辑界面数据
            editForm: {
                noticeId: '',
                noticeName: '',
                noticeInfo: '',
                noticeDateStr: '',
                noticeTargetStr: ''
            },
        }
    },
    mounted() {

        this.handleIconClick();
    },
    methods: {
        //模糊查询
        handleIconClick() {
            let para = {
                pageNo: this.currentPage,
                pageSize: this.pageSize
            };

            if (this.input != '') {
                para.noticeName = this.input;
            }
            if (this.date1 != '' && this.date2 != '') {
                para.startDate = util.formatDate.format(new Date(this.date1), 'yyyy-MM-dd');     // 开始日期
                para.endDate = util.formatDate.format(new Date(this.date2), 'yyyy-MM-dd');     // 结束日期
            }

            getlikedata(para).then((res) => {
                if (res.resCode != 0) {
                    this.$message({
                        message: res.resMsg,
                        type: 'error'
                    });
                } ;
                this.tableData = res.resData.list;
                this.total = res.resData.total;
                /*}*/
            });
        },
        // 分页组件
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.handleIconClick();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.handleIconClick();
        },

        //根据ID查询
        handleEdit(index, row) {
            let para = { noticeId: row.noticeId }
            this.updateFormVisible = true;
            querynotice(para).then((res) => {
                //alert("ID" + para.noticeId)
                this.aaaaa = res.resData;
                //alert(aaaaa.noticeName);

            })
        },


        //添加公告
        handleAdd() {
            this.addFormVisible = true;
            this.addForm = {
                noticeName: '',
                noticeInfo: '',
                noticeTargetStr: '',
                noticeDate: ''

            };
        },
        addSubmit: function () {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.addLoading = true;
                        let para = Object.assign({}, this.addForm);
                        addnotice(para).then((res) => {
                            this.addLoading = false;
                            if (res.resCode != 0) {
                                this.$message({
                                    message: res.resMsg,
                                    type: '请正确填写内容'
                                });
                            } else {
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$refs['addForm'].resetFields();
                                this.addFormVisible = false;
                                this.handleIconClick();//应该用mounted（）里的方法 来实现异步
                            }
                        });
                    });
                }
            });
        },

        //显示编辑界面
        handleLook: function (index, row) {
            this.editFormVisible = true;
            this.editForm = Object.assign({}, row);
        },

        //编辑

        editSubmit: function () {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.editLoading = true;
                        let para = {
                            noticeId:this.editForm.noticeId,
                            noticeName:this.editForm.noticeName,
                            noticeInfo:this.editForm.noticeInfo,
                            noticeDateStr:this.editForm.noticeDateStr,
                            noticeTargetStr:this.editForm.noticeTargetStr
                        };
                        editnotice(para).then((res) => {
                            this.editLoading = false;
                            if(res.resCode==0) {
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.handleIconClick();
                            }else{
                                this.$message({
                                    message: '提交失败',
                                    type: 'info'
                                });
                            }
                            this.$refs['editForm'].resetFields();
                            this.editFormVisible = false;
                        });
                    });
                }
            });
        },
        //删除
        handleDel: function (index, row) {
            this.$confirm('确认删除该记录吗?', '提示', {
                type: 'warning'
            }).then(() => {
                let para = { noticeId: row.noticeId };
                deletenotice(para).then((res) => {
                    this.listLoading = false;
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.handleIconClick();
                });
            }).catch(() => {

            });
        },
        selsChange: function (sels) {
            this.sels = sels;
        },

    }

}
</script>

<style scoped>
    .border-table {
        border-collapse: collapse;
        border: none;
        width: 100%;
    }
    .border-table td {
        border: solid #dfe8ec 1px;
        background: #fff;
        font-size:14px;
        padding: 6px 6px 6px 12px;
        color: #009966;
        line-height:28px;
    }
    td.alt {
        width: 100px;
        background: #EFF2F7;
        color:#8492A6;
    }
</style>
